<template>
  <div class="search-div">
    <!-- 搜索表单 -->
    <el-form label-width="70px" size="small">
      <el-form-item label="姓名">
        <el-input
          v-model="doctor.dname"
          style="width: 100%"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-row style="display: flex">
        <el-button type="primary" size="small" @click="searchSysRole">
          搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
    </el-form>

    <!--- 角色表格数据 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="dbName" label="患者姓名" width="180" />
      <el-table-column prop="rpName" label="用户类型" width="180" />
      <el-table-column prop="guanum" label="管理人数" width="180" />
      <el-table-column prop="special" label="专案数" width="130" />
      <el-table-column prop="hypertension" label="高血压" width="180" />
      <el-table-column prop="diabetes" label="糖尿病" width="130" />
      <el-table-column prop="coronary" label="冠心病" width="180" />
      <el-table-column prop="high" label="高危人群" width="130" />
      <el-table-column prop="general" label="一般人群" width="130" />
    </el-table>

    <el-pagination
      v-model:current-page="pageParams.page"
      v-model:page-size="pageParams.limit"
      :page-sizes="[5, 10, 20, 50, 100]"
      @size-change="fetchData"
      @current-change="fetchData"
      layout="total, sizes, prev, pager, next"
      :total="total"
    />
    <!-- <div id="maines" style="float: left; width: 550px; height: 400px"></div> -->
    <div>
    <el-row :gutter="10">
      <el-col :span="12">
         <el-card>
          <div id="main" style="float: left; width: 550px; height: 400px"></div>
            <!-- <div id="line" style="width: 100%; height: 400px" ></div> -->
         </el-card>
      </el-col>

      <el-col :span="12">
         <el-card>
          <div id="mains" style="float: left; width: 500px; height: 400px"></div>
            <!-- <div id="bar" style="width: 100%; height: 400px" ></div> -->
         </el-card>
      </el-col>

    <!-- <el-col :span="12" style="margin: 10px 0">
        <el-card>
           <div id="pie" style="width: 100%; height: 400px" ></div>
        </el-card>
     </el-col> -->
 </el-row>
  </div>
  </div>
</template>
<!-- script部分修改内容 -->
<script setup>
import { ref, onMounted } from 'vue'
import { pageManagement,inList } from '@/api/statistics/managements'
import * as echarts from 'echarts'
import { ElMessage, ElMessageBox } from 'element-plus'

// 分页条总记录数
let total = ref(0)

// 定义表格数据模型
let list = ref([])
const defaultProps = {
  children: 'children',
  label: 'title',
}
//定义职称
let protitle = ref([])

//分页数据
const pageParamsForm = {
  page: 1, // 页码
  limit: 5, // 每页记录数
}
const pageParams = ref(pageParamsForm) // 将pageParamsForm包装成支持响应式的对象
//定义搜索职称数据模型
const protilte = {
  professionaltitle: '',
}
const protiltis = ref(protilte)
//定义职称数据模型
const defaultForm = {
  id: '',
  doctorId: '',
  dname: "",
  guanum: '',
  special: '',
  hypertension: '',
  diabetes: '',
  coronary: '',
  high: '',
  general: '',
}
const doctor = ref(defaultForm)

// 页面加载完毕以后请求后端接口获取数据
onMounted(() => {
  fetchData()
})

// 搜索按钮点击事件处理函数
const searchSysRole = () => {
  fetchData()
}

// 重置按钮点击事件处理函数
const resetData = () => {
  doctor.value.dname = ''
  fetchData()
}

// 远程调用后端分页查询接口
const fetchData = async () => {
  const { data, code, message } = await pageManagement(
    pageParams.value.page,
    pageParams.value.limit,
    doctor.value
  )
  list.value = data.list
  total.value = data.total
}
//声明周期函数，自动执行初始化
onMounted(() => {
  init();
});
//初始化函数
function init() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main"));
  let Charts = echarts.init(document.getElementById("mains"));
  // let Chartes = echarts.init(document.getElementById("maines"));
  // 绘制图表
  let option = {
    title: {
      text: "患者得病统计",
    },
    tooltip: {},
    xAxis: {
      data: ["冠心病", "高血压", "糖尿病"],

    },
    yAxis: {},
    series: [
      {
        name: "病人",
        type: "bar",
        data: [64, 23, 54],
      },
    ],
  };

  let options = {
    title: {
    text: '',
    subtext: '人群分类统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 23, name: '一般人群' },
        { value: 17, name: '慢病患者' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

let optiones = {
    xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260, 300, 370, 380, 360, 460],
      type: 'line'
    }
  ]
};

  // 渲染图表
  Chart.setOption(option);
  Charts.setOption(options);
  Chartes.setOption(optiones);
}

const chartDom = ref(null)
let myChart = null

const fetchDataAndInitChart = async () => {
  try {
    const response = await inList() // 假设 response.data 是包含您需要的数据的数组
    const chartData = response.data
      ? response.data.map(item => ({
          name: item.name,
          value: item.value,
        }))
      : []
    if (chartDom.value) {
      myChart = echarts.init(chartDom.value)
      setChartOption(chartData)
    }
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}
const setChartOption = data => {
  const option = {
    title: {
      text: '慢病人群分类', // subtext: 'Data from API',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '人数',
        type: 'pie',
        radius: '60%',
        data: data, // 使用从API获取的数据
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  myChart.setOption(option)
}
onMounted(fetchDataAndInitChart) // 在组件挂载后获取数据并初始化图表


const option = {
  title: {
    text: '订单金额统计图',
    left: "center"
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'left'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '库存',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true
    },
    {
      name: '设备',
      data: [789, 456, 122, 159, 258, 357, 900],
      type: 'line',
      smooth: true
    }
  ]
};


const option1 = {
  title: {
    text: '订单金额统计图',
    left: "center"
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  xAxis: {
    type: 'category',
    data: ['水果', '零食', '饮料', '奶制品', '生活用品']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '库存',
      data: [150, 230, 224, 218, 135],
      type: 'bar',
      smooth: true
    },
    {
      name: '设备',
      data: [789, 456, 122, 159, 258, 357, 900],
      type: 'bar',
      smooth: true
    }
  ]
};


const option2 = {
  title: {
    text: '比例百分比',
    subtext: 'Fake Data',
    left: 'right'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};


onMounted(() => {
  let chartDom = document.getElementById('line');
  let myChart = echarts.init(chartDom);
  myChart.setOption(option);

  let bartDom = document.getElementById('bar');
  let barChart = echarts.init(bartDom);
  barChart.setOption(option1);

  let pietDom = document.getElementById('pie');
  let pieChart = echarts.init(pietDom);
  pieChart.setOption(option2);

});


</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>